<template>
	<div class="my-edit-range" :style="rangeStyle" @mousedown="mousedownBoxSelect($event, undefined)">
		<slot></slot>
		<!-- 水印 -->
		<edit-watermark></edit-watermark>
		<!-- 拖拽时的辅助线 -->
		<edit-align-line></edit-align-line>
		<!-- 框选时的样式框 -->
		<edit-select></edit-select>
		<!--辅助网格线 -->
		<svg style="position: absolute; top: 0; left: 0" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
			<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
				<path d="M 100 0 L 0 0 0 100" fill="none" stroke="#4C4D4F" stroke-width="0.5" />
			</pattern>
			<rect width="100%" height="100%" fill="url(#grid)" />
		</svg>
	</div>
</template>

<script setup>
import { EditAlignLine } from '../EditAlignLine';
import { EditWatermark } from '../EditWatermark';
import { EditSelect } from '../EditSelect';

import { useSizeStyle } from '@/utils';
import { mousedownBoxSelect } from '../../hooks/useDrag.hook';

const size = computed(() => {
	return {
		w: $store.chart.editCanvasConfig.width,
		h: $store.chart.editCanvasConfig.height
	};
});

const rangeStyle = computed(() => {
	// 缩放
	const scale = {
		transform: `scale(${$store.chart.editCanvas.scale})`
	};

	const { selectColor, background, backgroundImage } = $store.chart.editCanvasConfig;

	// 背景
	const computedBackground = selectColor
		? { background: background }
		: { background: `url(${backgroundImage}) center center / cover no-repeat !important` };

	return { ...useSizeStyle(size.value), ...scale, ...computedBackground };
});
</script>

<style lang="scss" scoped>
@include b(edit-range) {
	position: relative;
	transform-origin: left top;
	background-size: cover;
	overflow: visible;
	border-radius: 4px;
	transition: all var(--el-transition-duration-fast);
	background-color: var(--color-bg-2);
}
</style>
